<template>
	<view class="wanlshop-container">
	
		<!-- <view v-if="common.modulesData.homeModules.page" class="wanlshop-container__head" :style="{
				height: headHeight + 'px',
				color: common.modulesData.homeModules.page ? common.modulesData.homeModules.page.style.navigationBarTextStyle == '#ffffff' ? '#ffffff' : '#333333' : '',
				backgroundColor: common.modulesData.homeModules.page ? common.modulesData.homeModules.page.style.navigationBarBackgroundColor : '#f7f7f7',
				backgroundImage: 'url(' + $wanlshop.oss( common.modulesData.homeModules.page ? common.modulesData.homeModules.page.style.navigationBackgroundImage : '', 0, 50, 1, 'transparent', 'png' ) + ')'
			}">
			<view :style="{ height: headHeight + 'px', paddingTop: headTop + 'px' }">
				<view class="navigater flex align-center justify-between">
					<view class="flex" @tap="scanCode">
						<view class="text-xxl"><text class="wlIcon-saoyisao"></text></view>
					</view>
					<view class="search flex align-center margin-lr-sm round">
						<view class="icon text-df text-bold wanl-gray-dark">
							<text class="wlIcon-sousuo1"></text>
						</view>
						<swiper vertical autoplay circular interval="3000">
							<swiper-item @tap="handleSearch('')">
								<text class="wanl-gray-dark text-cut">搜索 商品、类目</text>
							</swiper-item>
							<swiper-item v-for="(item, index) in common.modulesData.searchModules" :key="item.keywords"
								@tap="handleSearch(item.keywords)">
								<text class="wanl-gray-dark text-cut">{{ item.keywords }}</text>
							</swiper-item>
						</swiper>
					</view>
					<view class="flex">
						<view class="margin-right-bj text-xxl position-relative" @tap="handleModal('share')">
							<text class="wlIcon-fenxiangcopy" />
						</view>

						<view class="text-xxl" @tap="$wanlshop.to('/pages/notice/notice')">
							<text class="wlIcon-xiaoxizhongxin"></text>
						</view>
					</view>
				</view>
				<view class="toolbar flex padding-lr-bj align-center">
					<scroll-view class="scroll" scroll-x scroll-with-animation :scroll-left="scrollLeft">
						<view class="scroll__item" :class="{ action: currentItemId === 'follow' }"
							@tap="handleSelect('follow', 0)">
							关注
						</view>
						<view class="scroll__item" :class="{ action: currentItemId === 'home' }"
							@tap="handleSelect('home', 1)">
							推荐
						</view>
						<view class="scroll__item" v-for="(item, index) in common.modulesData.categoryModules1"
							:key="item.id" :class="{ action: currentItemId === 'cid' + item.id }"
							@tap="handleSelect('cid' + item.id, index + 2)">
							{{ item.name }}
						</view>
					</scroll-view>
					<view class="category flex align-center" @tap="handleModal('category')">
						<text v-if="modalName == 'category'" class="wlIcon-fanhui3"></text>
						<text v-else class="wlIcon-fanhui4"></text>
					</view>
				</view>
			</view>
		</view>
		<swiper class="wanlshop-container__main" :current-item-id="currentItemId" :style="{
				height: windowHeight + 'px'
			}" @change="changeCurrent" @animationfinish="animationFinish">

			<swiper-item item-id="follow">
				<wanl-shop-find :windowHeight="windowHeight" :headHeight="headHeight" :currentItemId="currentItemId"
					:homeModules="common.modulesData.homeModules" :appConfig="common.appConfig" :user="user" />
			</swiper-item>

			<swiper-item item-id="home">
				<wanl-shop-page :windowHeight="windowHeight" :headHeight="headHeight" :headTop="headTop"
					:pageModules="common.modulesData.homeModules" :adData="common.adData" />
			</swiper-item>

			<swiper-item v-for="(item, index) in common.modulesData.categoryModules1" :key="item.id"
				:item-id="'cid' + item.id">
				<wanl-shop-category :cid="item.id" :headHeight="headHeight" :windowHeight="windowHeight"
					:currentItemId="currentItemId" :homeModules="common.modulesData.homeModules"
					:childlist="item.childlist" />
			</swiper-item>
		</swiper> -->

		<!-- 新页面 -->
		<view class="">
			<u-sticky bgColor="#fff" offsetTop="0" customNavHeight="0">
				<u-status-bar></u-status-bar>
				<view class="u-flex u-flex-y-center u-flex-between head">
					<!-- <view class="flex" @tap="scanCode">
						<image src="https://fen.fuliaoxx.com/img/new/home/sys.png" class="sys" mode=""></image>
					</view> -->
					<view class="ss" @tap="handleSearch('')" style="width: 360rpx;">
						<image src="https://fen.fuliaoxx.com/img/new/home/ss.png" class="ss__icon" mode=""></image>
						<view class="ss__text">
							{{ $getText( txt.searchHolder) }}
						</view>
						<view class="ss__btn">
							{{  $getText( txt.searchBtn) }}
						</view>
					</view>
					<view class="flex u-flex-y-center" style="justify-content: flex-start;flex: 1;padding-left: 20rpx;">
						<image src="https://fen.fuliaoxx.com/img/new/home/fx.png" @tap="handleModal('share')" class="fx"
							mode=""></image>
						<image src="https://fen.fuliaoxx.com/img/new/home/xx.png" class="xxicon"
							@tap="$wanlshop.to('/pages/notice/notice')" mode=""></image>
					</view>
					<!-- <view class="lan">
						<text style="margin-left: 15rpx;">{{ currentLanguage }}</text>
						<u-icon name="arrow-down" style="margin-right: 5rpx;" @click="toggleDropdown" />
						<view v-if="showDropdown" class="dropdown">
						<view @click="changeLanguage(0)">中文</view>
						<view @click="changeLanguage(1)">Қазақша</view>
						</view>
					</view> -->
				</view>
			</u-sticky>
			<view class="con">
				<u-swiper :list="list1" height="398rpx" radius='12rpx' bgColor="#fff"></u-swiper>

				<view class="tab">
					<u-grid :border="false" col="6">
						<u-grid-item @click="$wanlshop.to('/pagesA/new/new?title=关注')">
							<image src="https://fen.fuliaoxx.com/img/new/home/t0.png" class="tab__item__icon" mode="">
							</image>
							<text class="tab__item__text">{{ $getText(txt.follow ) }}</text>
						</u-grid-item>
						<u-grid-item @click="$wanlshop.to('/pages/page/new?title=推荐')">
							<image src="https://fen.fuliaoxx.com/img/new/home/t1.png" class="tab__item__icon" mode="">
							</image>
							<text class="tab__item__text">{{ $getText(txt.recommend )  }}</text>
						</u-grid-item>
						<u-grid-item v-for="(listItem,listIndex) in common.modulesData.categoryModules1" :key="listIndex"
							@click="$wanlshop.to('/pages/page/new?title='+listItem.name+'&index='+listIndex+'&cid='+listItem.id)"
							v-if="listIndex<=9 || isShow">
							<image :src="$wanlshop.oss(listItem.image)" class="tab__item__icon" mode="">
							</image>
							<text class="tab__item__text">
							<text>{{language==1? listItem.hname:language==2? listItem.wname: listItem.name }}</text>
							</text>
						</u-grid-item>
					</u-grid>
					<view class="" style="display: flex;padding: 0;justify-content: center;padding-top: 4rpx;"
						@click="isShow = !isShow">
						<u-icon name="arrow-down" color="#000000" size="16" v-if="!isShow"></u-icon>
						<u-icon name="arrow-up" color="#000000" size="16" v-else></u-icon>
					</view>
				</view>

				<view class="u-flex u-flex-y-center u-flex-between" style="margin-top: 16rpx;">
					<view class="wbz" @click="$wanlshop.to('/pages/product/typegoods?title=哇巴扎臻品')" style="width: 100%;margin-right: 0;">
						<image src="https://fen.fuliaoxx.com/img/new/home/bzbg.png" class="wbz__bg" mode="" style="width: 100%;margin-right: 0;"></image>
						<view class="wbz__con" style="padding-top: 20rpx;">
							<text style="margin-left: 34rpx;">{{$getText('哇巴扎臻品')}}</text>
							<!-- <image src="https://fen.fuliaoxx.com/img/new/home/wbz.png" class="wbz__text" mode=""> -->
							</image>
							<view class="wbz__yy">
								Wabaza exquisite product
							</view>
						</view>
					</view>
					<!-- 拼团推荐 -->
	<!-- 				<view class="pt" @click="$wanlshop.to('/pages/product/typegoods?title=拼团推荐')">
						<image src="https://fen.fuliaoxx.com/img/new/home/ptbg.png" class="pt__bg" mode=""></image>
						<view class="pt__con">
							<view v-if="language!=0" style="height: 20rpx;"></view>
							<text v-if="language!=0" style="margin-left: 34rpx;">{{$getText('热门拼团')}}</text>

							<image v-if="language==0" src="https://fen.fuliaoxx.com/img/new/home/pt.png"
								class="pt__text" mode=""></image>
							<view v class="pt__yy">
								Popular group buying
							</view>
						</view>
					</view> -->
				</view>
				<view class="u-flex u-flex-y-center u-flex-between" style="margin-top: 28rpx;margin-bottom: 28rpx;">
					<view class="xx" v-for="(item,index) in xxlist" :key="index" :class="curxx==index?'xxac':''"
						@click=" changeCurxx(index)">
						{{$getText(item.name) }}
					</view>
				</view>


				<goodslist :leftList='leftList' :rightList="rightList"></goodslist>
				<uni-load-more :status="status" :content-text="contentText" />
			</view>
		</view>


		<view class="WANL-MODAL" @touchmove.stop.prevent="moveHandle">

			<view class="cu-modal top-modal" :class="modalName == 'category' ? 'show' : ''" @tap="handleModal()">
				<view class="cu-dialog padding-lr-bj padding-bottom-bj" :style="{ paddingTop: headHeight + 12 + 'px' }"
					@tap.stop="">
					<view class="category text-min">
						<view class="item round bg-gray" @click="$wanlshop.to('/pagesA/new/new?title=关注')">
							{{ $getText('关注')}}
							
						</view>
						<view class="item round bg-gray" @click="$wanlshop.to('/pages/page/new?title=推荐')">
							
							{{ $getText('推荐')}}
						</view>
						<view class="item round bg-gray" v-for="(item, index) in common.modulesData.categoryModules1"
							:key="item.id"
							@click="$wanlshop.to('/pages/page/new?title='+item.name+'&index='+index+'&cid='+item.id)">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>


			<view class="cu-modal wanl-share bottom-modal" :class="modalName == 'share' ? 'show' : ''"
				@tap="handleModal()">
				<view class="cu-dialog" @tap.stop="">
					<wanl-share ref="wanlShare" page="pages/index" :scene="{qr:'i'}" :scrollAnimation="scrollAnimation"
						@change="handleModal" />
				</view>
			</view>


			<view class="cu-modal" :class="{ show: update.update }">
				<view class="cu-dialog">
					<view class="hade">
						<image :src="$wanlshop.appstc('/common/update.png')" mode="aspectFit"></image>
						<view class="title">
							<view class="text-white text-bold5">{{ update.data.title }}</view>
							<text class="text-white text-bold5">
								最新版本：{{ update.data.versionName }}
							</text>
						</view>
					</view>

					<view class="info">
						<view class="text-lg text-bold5"><text>更新内容：</text></view>
						<rich-text class="wanl-gray-dark" :nodes="update.data.content" />
						<!-- 开始下载 -->
						<view class="margin-top-xl" v-if="update.download.start">
							<view class="flex margin-bottom-sm">
								<view class="cu-progress round striped active">
									<view class="bg-orange" :style="{ width: update.download.progress + '%' }"></view>
								</view>
								<text class="margin-left-sm">{{ update.download.progress }}%</text>
							</view>
							<view class="wanl-gray-dark text-sm text-center">
								<text>
									下载中，请稍等（{{
										$wanlshop.conver(update.download.totalBytesWritten)
									}}/{{
										$wanlshop.conver(update.download.totalBytesExpectedToWrite)
									}}）
								</text>
							</view>
						</view>
						<!-- 开始安装 -->
						<view class="margin-top-xl text-center" v-else-if="update.download.install">
							安装中...
						</view>
						<!-- 更新提示 -->
						<view class="flex justify-around margin-top-xl" v-else>
							<button class="cu-btn radius-bock bg-gray lg" @tap="ignore">
								忽略升级
							</button>
							<button class="cu-btn radius-bock bg-blue lg" @tap="download">
								立刻升级
							</button>
						</view>
					</view>
				</view>
			</view>
		</view>

		<home />
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	import wanlShopPage from '@/components/wanl-shop/page';
	import wanlShopFind from '@/components/wanl-shop/find';
	import wanlShopCategory from '@/components/wanl-shop/category';
	import home from '@/components/home/index'
	export default {
		components: {
			wanlShopPage,
			wanlShopFind,
			wanlShopCategory,
			home

		},
		computed: {
			...mapState(['common', 'user', 'update', 'language']),
			...mapState('translate', ['language']),
			currentLanguage() {
				return this.language === 0 ? '中文' : 'Қазақша';
			},
			txt() {
				return  this.langMap[0]; // 兜底中文
			}
		},
		data() {
			return {
				isShow: false,
				showDropdown: false, // 控制下拉框的显示与隐藏
				dataList: [], //数据
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: 'loading',
				contentText: {
					contentdown: '下拉加载更多',
					contentrefresh: '疯狂加载中...',
					contentnomore: this.$getText('我是有底线的')
				},
				leftList: [],
				rightList: [],
				xxlist: [{
						name: '热推新品'
					},
					{
						name: '热卖好物'
					},
				],
				xxlist2: [{
						name: 'جاڭا تاۋارلار'
					},
					{
						name: 'ءوتىمدى تاۋارلار'
					},
				],
				curxx: 0,
				list1: [],
				modalName: '',
				scrollAnimation: 300,
				headHeight: 75,
				windowHeight: 0,
				headTop: 0,
				currentItemId: 'home',
				currentData: {},
				scrollLeft: 0,
				contentText: {
					contentdown: '下拉加载更多',
					contentrefresh: '加载中',
					contentnomore: this.$getText('我是有底线的')
				},

				langMap: {
					0: { // 中文
						sys: '扫一扫',
						searchHolder: "请输入商品",
						searchBtn: '搜索',
						follow: '关注',
						recommend: '推荐',
						more: '更多',
						wabaza: '哇巴扎臻品',
						group: '拼团推荐',
						hotNew: '热推新品',
						hotSale: '热卖好物'
					},
					1: { // 哈萨克语
						sys: 'Сканерлеу',
						searchHolder: 'ىزدەۋ',
						searchBtn: 'ىزدەۋ',
						follow: 'تىركەلگەندەر',
						recommend: 'ۇسنىستار',
						more: 'ءتىپتىدە كوپ',
						wabaza: 'Wabaza таңдауы',
						group: 'Топ сатып алу',
						hotNew: 'Жаңа тауарлар',
						hotSale: 'Сатылым хиті'
					}
				},
			};
		},
		onReachBottom() {
			this.loadData('lower')
		},
		onPullDownRefresh() {
			this.current_page = 1
			this.loadData()
		},
		async onShow() {
uni.setTabBarItem({
				index:0,text:this.$getText('主页')
			})
			uni.setTabBarItem({
				index:1,text:this.$getText('分类')
			})
			uni.setTabBarItem({
				index:2,text:this.$getText('发现')
			})
			uni.setTabBarItem({
				index:3,text:this.$getText('购物车')
			})
			uni.setTabBarItem({
				index:4,text:this.$getText('我的')
			})
			await uni.request({
				url: '/wanlshop/index/banner',
				data: {
					type: 1
				},
				success: res => {
					console.log(res)
					this.list1 = res.data.map(item => {
						return item.image
					})
				}
			});
			if (uni.getStorageSync("shop_login_token")) {
				uni.reLaunch({
					url: "/pagesA/index/index"
				})
				return
			}
			// #ifdef APP-PLUS
			plus.navigator.setFullscreen(false);
			// #endif
			// 计算页面尺寸
			let sys = this.$wanlshop.wanlsys();
			this.headTop = sys.top;
			this.headHeight = sys.height + uni.upx2px(60);
			this.windowHeight = sys.windowHeight;
			// setTimeout(() => {
			// 	uni.setNavigationBarColor({
			// 		frontColor: this.$store.state.common.modulesData.homeModules.page ?
			// 			this.$store.state.common.modulesData.homeModules.page.style
			// 			.navigationBarTextStyle : '',
			// 		backgroundColor: this.$store.state.common.modulesData.homeModules.page ?
			// 			this.$store.state.common.modulesData.homeModules.page.style
			// 			.navigationBarBackgroundColor : ''
			// 	});
			// }, 200);
		},
		created() {
			this.loadData();
		},
		onReady() {
			// 判断网络类型
			uni.getNetworkType({
				success: res => {
					if (res.networkType == '2g' || res.networkType == '3g' || res.networkType == '4g') {
						this.$wanlshop.msg('当前使用非WIFI环境，请注意流量使用');
					} else if (res.networkType == 'none') {
						this.$wanlshop.msg('没有网络');
					}
				}
			});
		},
		onLoad(query) {
			// 判断是否小程序来源
			if (query.hasOwnProperty('scene')) {
				let scene = decodeURIComponent(query.scene);
				scene = this.$wanlshop.getParam(scene);
				console.log('微信小程序：', scene);
			}
		},
		methods: {

			...mapActions({
				switchLanguage: 'translate/switchLanguage', // 映射 Vuex 中的 action
			}),
			toggleDropdown() {
				this.showDropdown = !this.showDropdown; // 切换下拉菜单显示
			},
			changeLanguage(index) {
				console.log('点击语言：', index);
				this.switchLanguage(index);
				console.log('切换后 language：', this.$store.state.translate.language); // ✅ 打印 Vuex 状态
				this.showDropdown = false;
			},
			changeCurxx(index) {
				if (this.curxx == index) return;
				this.curxx = index;
				this.current_page = 1;
				this.loadData();
			},
			async loadData(type) {
				this.status = 'loading';
				// 判断上拉还是下拉
				if (type === 'lower') {
					if (this.current_page >= this.last_page) {
						this.status = 'noMore';
						return false;
					} else {
						this.current_page += 1;
					}
				}
				let param = {
					page: this.current_page,

				}
				if (this.curxx) {
					param['flag'] = 'hot';
				} else {
					param['flag'] = 'new';
				}
				await uni.request({
					url: '/wanlshop/product/likes',
					data: param,
					success: res => {
						if (type === 'lower') {
							this.dataList = this.dataList.concat(res.data.data);
						} else {
							this.dataList = res.data.data;
						}
						this.leftList = []
						this.rightList = []
						this.dataList.map((t, i) => {
							if (i % 2 == 0) {
								this.leftList.push(t)
							}
							if (i % 2 == 1) {
								this.rightList.push(t)
							}
						})
						this.current_page = res.data.current_page; //当前页码
						this.last_page = res.data.last_page; //总页码
						// 判断是否还有数据
						if (res.data.current_page === res.data.last_page || res.data.total === 0) {
							this.status = 'noMore';
						} else {
							this.status = 'more';
						}
						uni.stopPullDownRefresh()
					}
				});
			},
			...mapActions({
				download: 'update/download', // 立即下载
				ignore: 'update/ignore' // 忽略更新
			}),
			// 选择Tag
			handleSelect(id, index) {
				this.currentItemId = id;
				this.scrollLeft = (index - 1) * 50;
			},
			// 动画
			animationFinish(e) {
				//#ifdef APP-PLUS
				this.changeCurrent(e);
				//#endif
			},
			// 滚动的tag
			changeCurrent(e) {
				this.currentItemId = e.detail.currentItemId;
				this.scrollLeft = (e.detail.current - 1) * 50;
			},
			// 弹出层
			handleModal(name) {
				// 滚动分享
				if (name == 'share') {
					setTimeout(() => {
						this.scrollAnimation = 0;
					}, 300);
				}
				// 强制关闭海报
				if (this.modalName == 'share') {
					this.$refs.wanlShare.closePoster();
				}
				this.modalName = this.modalName ? null : name;
			},
			// 扫码
			scanCode() {
				// #ifndef H5
				uni.scanCode({
					success: res => {
						let query = this.$wanlshop.getParam(res.result),
							id = query.id;
						switch (query.qr) {
							case 'g':
								this.onGoods(id);
								break;
							case 'gr':
								this.$wanlshop.to(
									`/pages/apps/groups/goods?id=${id}&groups_id=${query.groups_id}`);
								break;
							case 'u':
								this.$wanlshop.to(`/pages/user/info?id=${id}`);
								break;
							case 'fu':
								this.$wanlshop.to(`/pages/apps/find/user?id=${id}`);
								break;
							case 'c':
								this.$wanlshop.on('/pages/category');
								break;
							case 'p':
								this.$wanlshop.to(`/pages/page/index?id=${id}`);
								break;
							case 's':
								this.onShop(id);
								break;
							case 'live':
								// #ifdef APP-PLUS || MP-WEIXIN
								this.$wanlshop.auth(`/pages/shop/live/live`);
								// #endif
								// #ifndef APP-PLUS || MP-WEIXIN
								this.$wanlshop.msg('目前只开放App和微信小程序直播');
								// #endif
								break;
							case 'chat':
								this.toChat(id);
								break;
						}
					}
				});
				// #endif
				// #ifdef H5
				this.$wanlshop.msg('暂不支持H5扫码');
				// #endif
			},
			// 搜索
			handleSearch(text) {
				this.$wanlshop.to(`/pages/page/search?type=goods&keywords=${text}`, 'fade-in', 100);
			},
			//禁止父元素滑动 1.0.3升级
			moveHandle() {}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.wanlshop-container {
		background-color: #fff;

		&__head {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 999;
			background-size: 100% auto;
			background-repeat: no-repeat;

			.navigater {
				height: 86rpx;
				padding-left: 25rpx;
				padding-right: 25rpx;
				/* #ifdef MP */
				padding-right: 200rpx;

				/* #endif */
				.search {
					flex: 1;
					background-color: #fff;
					height: 66rpx;
					border: 2rpx solid #fff;

					.icon {
						margin: 0 20rpx;
					}

					swiper {
						height: 100%;
						width: 100%;
						margin-right: 10rpx;

						swiper-item {
							display: flex;
							align-items: center;
						}
					}
				}
			}

			.toolbar {
				.scroll {
					flex: 1;
					white-space: nowrap;
					overflow: hidden;
					width: 100%;

					&__item {
						position: relative;
						z-index: 2;
						font-size: 28rpx;
						display: inline-flex;
						height: 58rpx;
						align-items: center;
						margin-right: 40rpx;

						&.action {
							position: relative;
							font-weight: bold;
							font-size: 30rpx;

							&::after {
								content: ' ';
								position: absolute;
								bottom: 0;
								left: 50%;
								transform: translateX(-50%);
								height: 4rpx;
								width: 30rpx;
								border-radius: 6rpx;
								background-color: #fff;
							}
						}
					}
				}

				.category {
					box-shadow: #eee -16rpx 0 16rpx -16rpx;
					height: 58rpx;
					font-size: 28rpx;
					padding-left: 25rpx;
				}
			}
		}

		&__main {
			position: relative;
			z-index: 99;
		}

		.WANL-MODAL {
			.cu-modal {
				&.top-modal {
					background: rgba(0, 0, 0, 0.6);
					text-align: inherit;

					.cu-dialog {
						background: #fff;
						border-radius: 0 0 18rpx 18rpx;

						.category {
							display: grid;
							grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
							grid-auto-flow: row dense;
							grid-gap: 16rpx;

							.item {
								display: flex;
								align-items: center;
								justify-content: center;
								padding: 12rpx 0;
								border: 2rpx solid transparent;

								&.action {
									background-color: transparent;
									border-color: #f40;
									color: #f40;
									font-weight: bold;
								}
							}
						}
					}
				}
			}
		}
	}



	.head {
		padding: 21rpx;
	}

	.sys {
		width: 36rpx;
		height: 33.43rpx;
	}

	.ss {
		width: 385rpx;
		height: 64rpx;
		background: #F0F0F0;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		display: flex;
		align-items: center;

		&__icon {
			width: 32.97rpx;
			height: 33rpx;
			margin-left: 17rpx;
		}

		&__text {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #999999;
			flex: 1;
			margin-left: 10rpx;
		}

		&__btn {
			width: 110rpx;
			height: 52rpx;
			background: #000000;
			border-radius: 26rpx 26rpx 26rpx 26rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			margin-right: 8rpx;
		}
	}

	.fx {
		width: 36rpx;
		height: 36rpx;
	}

	.xxicon {
		width: 38.1rpx;
		height: 36rpx;
		margin-left: 20rpx;
	}



	.con {
		padding: 16rpx 22rpx;

		.tab {
			margin-top: 20rpx;

			&__item {
				display: flex;
				flex-direction: column;
				align-items: center;

				&__icon {
					width: 82rpx;
					height: 82rpx;
				}

				&__text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					line-height: 33rpx;
					margin-top: 6rpx;
					margin-bottom: 20rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					width: 100rpx;
					text-align: center;
				}
			}
		}
	}

	.wbz {
		width: 426rpx;
		height: 130rpx;
		position: relative;

		&__bg {
			width: 426rpx;
			height: 130rpx;
			position: absolute;
			top: 0;
			left: 0;
		}

		&__con {
			position: absolute;
			top: 0;
			left: 0;

		}

		&__text {
			width: 147rpx;
			height: 42rpx;
			margin-top: 25rpx;
			margin-left: 34rpx;
		}

		&__yy {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 18rpx;
			color: #666666;
			line-height: 25rpx;
			margin-left: 34rpx;
		}
	}

	.pt {
		width: 268rpx;
		height: 130rpx;
		position: relative;

		&__bg {
			width: 268rpx;
			height: 130rpx;
			position: absolute;
			top: 0;
			left: 0;
		}

		&__con {
			position: absolute;
			top: 0;
			left: 0;
			width: 268rpx;
			height: 130rpx;
		}

		&__text {
			width: 118rpx;
			height: 42rpx;
			margin-top: 25rpx;
			margin-left: 30rpx;
		}

		&__yy {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 18rpx;
			color: #666666;
			line-height: 25rpx;
			margin-left: 34rpx;
		}
	}

	.xx {
		width: 347rpx;
		height: 71rpx;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		border: 2rpx solid #999999;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #999999;
		line-height: 26rpx;
	}

	.xxac {
		border: 2rpx solid #333333;
		color: #333333;
	}

	.lan {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		/* 确保下拉框显示在容器的下方 */
	}

	.u-icon {
		cursor: pointer;
	}

	.dropdown {
		position: absolute;
		top: 100%;
		/* 下拉框出现在容器下方 */
		left: 0;
		background-color: #fff;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		width: 100px;
		/* 设置下拉框宽度 */
		border-radius: 5px;
		z-index: 10;
	}

	.dropdown view {
		padding: 10px;
		cursor: pointer;
	}

	.dropdown view:hover {
		background-color: #f0f0f0;
	}
	.tab__item__text{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		white-space:pre-wrap!important;
		word-break: break-all;
		height: 68rpx;
	}
</style>